<template>
	<view class="page">
		<custom-navigation title="会员充值">
		</custom-navigation>

		<scroll-view class="body-scroll " scroll-y="true">

			<view class="item-view flex-row-center">
				<image :src="info.head_images||'/static/default_head.png'"  class="head-img"></image>
				<view class="flex-column" style="margin-left: 40rpx; flex: 1;">
					<view class="flex-row-center">
						<view class="name">{{info.member_name}}</view>
						<view :class="info.member_state=='生效'?'state':'unstate'">{{info.member_state=="生效"?'已激活':'禁用'}}
						</view>
					</view>

					<view class="flex-row-center" style="margin-top: 8rpx;">
						<view class="phone">{{info.openEye?info.member_phone:info.hide_member_phone}}</view>
						<image :src="info.openEye?'/static/open_eye.png':'/static/clonse_eye.png'" class="eye"
							@click.stop="itemOpenEye(info)"></image>
					</view>
					<view class="flex-row-center" style="margin-top: 10rpx;">
						<view class="amount">余额￥{{info.balance}}</view>
						<view class="integral">积分{{info.integral}}</view>
					</view>


				</view>

			</view>
			<view class="body-contaier">
				<view class="title">充值面额</view>
				<view v-for="(item,index) in list"
					:class="['item-box', 'flex-column-center', selectIndex==index?'item-box-check':'']"
					@click="swtichIndex(index)">
					<view class="name">充{{item.recharge_amount *1 }}元</view>
					<view class="gift-box">赠{{item.give_amount *1 }}元</view>
					<image src="../../static/check4.png" class="check-img" v-if="selectIndex==index"></image>
				</view>

				<view class="item-box flex-column-center" @click="customRechargeDialogShow=true">
					<view class="name">自定义金额</view>
					<view class="add">+ </view>
				</view>

			</view>

		</scroll-view>


		<view class="bottom-btn flex-column-center">
			<view class="btn" @click="rechargeDialogDetailShow=true">充值</view>
		</view>


		<u-mask v-show="customRechargeDialogShow" :show="customRechargeDialogShow" mode="bottom" bgColor="transparent" class="flex-column-center"
			style="justify-content: flex-end;" @click="customRechargeDialogShow=false">
			<view :class="customRechargeDialogShow?'showDialog':''" @tap.stop>
				<view class="title-box">
					<view class="text">自定义充值金额</view>
					<image src="../../static/close.png" @click.stop="customRechargeDialogShow=false" mode="aspectFill">
					</image>
				</view>
				<input placeholder="请输入自定义金额" v-model="recharge_amount"
							type="digit" @input="e=> {
									e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
												  $nextTick(() => {
													recharge_amount= e.target.value||''
												  })
											}" />

				<view v-if="list && list.length" class="flex-row"
					style="margin: 60rpx;margin-bottom: 88rpx; margin-left: 48rpx;margin-right: 48rpx;">
					<view class="name">赠送金额：</view>
					<view class="value">￥{{custom_give_amount}}</view>
				</view>

				<view class="bottom-box flex-column-center" @tap.stop>
					<view class="confirm" @click="customConfirm">立即充值</view>
				</view>
			</view>

		</u-mask>

		<u-mask :show="rechargeDialogDetailShow" v-if="list.length>0" mode="bottom" bgColor="transparent"
			class="flex-column-center" style="justify-content: flex-end;" @click="rechargeDialogDetailShow=false">
			<view :class="rechargeDialogDetailShow?'showDialog':''" @tap.stop>
				<view class="title-box">
					<view class="text">充值详情</view>
					<image src="../../static/close.png" @click.stop="rechargeDialogDetailShow=false" mode="aspectFill">
					</image>
				</view>

				<view class="flex-row" style="margin: 88rpx; margin-left: 48rpx;margin-right: 48rpx;">
					<view class="name">实充金额：</view>
					<view class="value">￥{{list[selectIndex].recharge_amount}}</view>
				</view>

				<view class="flex-row"
					style="margin: 60rpx;margin-bottom: 88rpx; margin-left: 48rpx;margin-right: 48rpx;">
					<view class="name">赠送金额：</view>
					<view class="value">￥{{list[selectIndex].give_amount}}</view>
				</view>

				<view class="bottom-box flex-column-center" @tap.stop>
					<view class="confirm" @click="rechargeConfirm(list[selectIndex])">立即充值</view>
				</view>
			</view>
		</u-mask>

		<u-mask v-show="rechargeDialogPaymentMethodShow" :show="rechargeDialogPaymentMethodShow" mode="bottom" bgColor="transparent" class="flex-column-center"
			style="justify-content: flex-end;" @click="rechargeDialogPaymentMethodShow=false">
			<view :class="rechargeDialogPaymentMethodShow?'showDialog':''" @tap.stop>
				<view class="title-box">
					<view class="text">支付方式</view>
					<image src="../../static/close.png" @click.stop="rechargeDialogPaymentMethodShow=false"
						mode="aspectFill">
					</image>
				</view>

				<view class="flex-row-center" v-for="(str,index) in padymentTitle" style="padding: 15rpx 50rpx;"
					@click="padmentIndex=index">
					<view class="paytitle">{{str}}</view>
					<image class="payimg" :src="padmentIndex==index?'/static/check4.png':'/static/uncheck.png'"></image>
				</view>

				<view class="bottom-box flex-column-center" @tap.stop>
					<view class="confirm" @click="confirmEntry">立即充值</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCustomOperationType: false,
				info: {},
				selectIndex: 0,
				list: [],
				recharge_amount: "", //充值金额
				gift_amount: 0, //赠送金额
				padmentIndex: 0,
				custom_give_amount:0,//自定义充值赠送金额
				padymentTitle: ['现金', '微信', '支付宝', '银联'],
				customRechargeDialogShow: false,
				rechargeDialogDetailShow: false,
				rechargeDialogPaymentMethodShow: false,
				flg_pay_time:0,

			}
		},
		onLoad(options) {
			this.info = JSON.parse(uni.getStorageSync("vip-user"))
			uni.setStorageSync("vip-user", null)
			this.getData()
		},
		watch: {
			recharge_amount(val){
				this.getCustomGiveAmout(val);
				if(this.list[this.selectIndex]){
					this.gift_amount = this.list[this.selectIndex].give_amount;
				} else {
					this.gift_amount = 0;
				}
			}
		},
		methods: {
			playShowToast(index){
				//  ['现金', '微信', '支付宝', '银联'],
				let str = '';
				switch (index) {
					case 1:
						str = '请扫描微信付款码';
						break;
					case 2:
						str = '请扫描支付宝付款码';
						break;
					case 3:
						str = '请扫描银联付款码';
						break;
				
					default:
						break;
				}
				if(str){
					uni.showToast({
						title: str,
						icon: 'none'
					})
				}
			},
			rechargeAmountInput(e){
				e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
					this.$nextTick(() => {
					if(e.target.value != ''){
						this.recharge_amount= Math.abs(parseInt(Number(e.target.value)));
					}
				})
			},
			getCustomGiveAmout(val){
				let res = 0;
				if(this.list && this.list.length){
					for (let i = this.list.length-1; i >=0; i--) {
						const item = this.list[i];
						if(item && val>=item.recharge_amount){
							res=item.give_amount;
							break;
						}
						
					}
				}
				this.custom_give_amount = res;
				return res;
			},
			customConfirm() {
				this.isCustomOperationType = true;
				if(this.isCustomOperationType && !this.recharge_amount){
					uni.showToast({
						title: "自定义金额为必填",
						icon: "none"
					})
					return;
				}
				this.customRechargeDialogShow = false;
				this.rechargeDialogDetailShow = false;
				this.rechargeDialogPaymentMethodShow = true;
			},
			rechargeConfirm(item) {
				this.isCustomOperationType = false;
				this.customRechargeDialogShow = false;
				this.rechargeDialogDetailShow = false;
				this.gift_amount = item.gift_amount
				if(!this.isCustomOperationType){
					this.gift_amount = item.give_amount;
				}
				this.recharge_amount = item.recharge_amount
				this.rechargeDialogPaymentMethodShow = true;
			},
			confirmEntry() {
				if(this.padmentIndex!=0){
					// 是三方支付,打开二维码扫码
					// this.qrcodeSearch("1667031567808")
					let ths = this;
					dsBridge.call("QRCode", {}, function(res) {
						if (res) {
							ths.confirmEntry2(res)
						}
					})
					return;
				}
				uni.showLoading({
					title: "加载中..."
				})
				let data =  [{
						"member_no": this.info.menber_no,
						"member_name": this.info.member_name,
						"member_phone": this.info.member_phone,
						"operation_type": "充值",
						"payment_method": this.padymentTitle[this.padmentIndex],
						"record_type": "手动调整",
						"usable_recharge_amount": Number(this.recharge_amount),
						"usable_gift_amount": Number(this.gift_amount),
						"recharge_amount": Number(this.recharge_amount),
						"gift_amount": Number(this.gift_amount||0),
						"total_amount": Number(this.recharge_amount) + Number(this.gift_amount),
						"channel_source": this.$SystemType
					}];
					if(this.isCustomOperationType){
						data[0].gift_amount = Number(this.custom_give_amount||0);
					}
				this.$apiPost("/retail/operate/srvretail_recharge_adjustment_consumption_add", [{
					"serviceName": "srvretail_recharge_adjustment_consumption_add",
					"condition": [],
					"data": data
				}]).then(res => {
					uni.hideLoading()
					this.customRechargeDialogShow = false;
					this.rechargeDialogDetailShow = false;
					this.rechargeDialogPaymentMethodShow = false;
					if(res.state=='SUCCESS'){
						uni.showToast({
							title: "会员充值成功！",
							icon: 'none'
						})
						try{
							// 更新最新金额
							let relation_condition = {
								"data": [{
									"relation": "OR",
									"data": [{
										"colName": "menber_no",
										"ruleType": "eq",
										"value": this.info.menber_no
									}]
								}],
								"relation": "AND"
							}

							this.$apiPost("/retail/select/srvretail_member_info_noencryption_select", {
								"serviceName": "srvretail_member_info_noencryption_select",
								"colNames": ["*"],
								"condition": [],
								"relation_condition": relation_condition,
								"page": {
									"rownumber": 20,
									"pageNo": 1
								}
							}).then(res => {
								if (res.data != null && res.data.length > 0) {
									this.info.balance = res.data[0].balance;
								}
							})
						}catch(e){
							//TODO handle the exception
						}
						this.recharge_amount = '';
						uni.setStorageSync("refresh", true)
					}
				})
			},

			chcekPayStatus(record_no, callback,frist){
				if(frist){
					this.flg_pay_time = new Date().getTime();
				}
				let t = new Date().getTime()-this.flg_pay_time;
				if(t > 22*1000){
					this.flg_pay_time = 0;
					return callback(false)
				}
				clearTimeout(this.timer_pay);
				this.timer_pay = setTimeout(() => {
					this.$apiPost("/retail/select/srvretail_member_recharge_flow_select", {
					"serviceName": "srvretail_member_recharge_flow_select",
					"colNames": ["*"],
						condition: [{
							colName: 'record_no',
							ruleType: 'eq',
							value: record_no
						}]
					}).then(res => {
						if(res.state=='SUCCESS'){
							this.flg_pay_time = 0;
							callback(true);
						} else {
							this.chcekPayStatus(record_no, callback);
						}
					})
				}, 1000);
			},
			confirmEntry2(qrcodeData) {
				let checkPayType = false;
				if (this.padymentTitle[this.padmentIndex] == '微信') {
					if (/^1[0-5]\d{16}$/.test(qrcodeData)) {
						checkPayType = true
					}
				} else if (this.padymentTitle[this.padmentIndex]  == '支付宝') {
					if (/^(?:2[5-9]|30)\d{14,22}$/.test(qrcodeData)) {
						checkPayType = true
					}
				} else if (this.padymentTitle[this.padmentIndex] == '银联') {
					if (/^62\d{0,32}$/.test(qrcodeData)) {
						checkPayType = true
					}
				}
				if(!checkPayType){
					uni.showToast({
						title: '请扫描'+this.padymentTitle[this.padmentIndex]+'付款码',
						icon: 'none'
					})
					return;
				}
				
				uni.showLoading({
					title: "加载中..."
				})
				// this.padmentIndex
				// padymentTitle: ['现金', '微信', '支付宝', '银联'],
				let pay_way_arr = ['', 'wx_pay', 'ali_pay', 'union']

				let gift_amount = Number(this.gift_amount||0);
				if(this.isCustomOperationType){
					gift_amount = Number(this.custom_give_amount||0);
				}
				// 是否是三方支付
				this.$apiPost("/retail/operate/srvls_m_charge_b_scan_c_pay", [{
					"serviceName": "srvls_m_charge_b_scan_c_pay",
					"condition": [],
					"data": [{
					"member_phone": this.info.member_phone,//会员手机号
					"member_no": this.info.menber_no,//会员编号
					"authCode": qrcodeData,//上一步得到的授权码
					"remark": "",
					"pay_way": pay_way_arr[this.padmentIndex],//支付方式，wx_pay|ali_pay|union(银联)
					"channel_source": this.$SystemType,
					"gift_amount": gift_amount ,//赠送金额,单位元 
					"recharge_amount": Number(this.recharge_amount),//充值金额
					}]
				}]).then(res => {
					if(res.state=='SUCCESS'){
						try{
							let callback = (ok)=>{
								if(ok)
								{
									uni.showToast({
										title: "会员充值成功！",
										icon: 'none'
									})
									// 更新最新金额
									let relation_condition = {
										"data": [{
											"relation": "OR",
											"data": [{
												"colName": "menber_no",
												"ruleType": "eq",
												"value": this.info.menber_no
											}]
										}],
										"relation": "AND"
									}

									this.$apiPost("/retail/select/srvretail_member_info_noencryption_select", {
										"serviceName": "srvretail_member_info_noencryption_select",
										"colNames": ["*"],
										"condition": [],
										"relation_condition": relation_condition,
										"page": {
											"rownumber": 20,
											"pageNo": 1
										}
									}).then(res => {
										if (res.data != null && res.data.length > 0) {
											this.info.balance = res.data[0].balance;
										}
									})
								} else {
									uni.showToast({
										title: "会员充值失败！",
										icon: 'none'
									})
								}
								uni.hideLoading()
								this.customRechargeDialogShow = false;
								this.rechargeDialogDetailShow = false;
								this.rechargeDialogPaymentMethodShow = false;
								this.recharge_amount = '';
								uni.setStorageSync("refresh", true)
							}
							this.chcekPayStatus(res.response[0].response.record_no,callback,true);
						}catch(e){
							//TODO handle the exception
						}
					} else {
						uni.hideLoading()
						this.customRechargeDialogShow = false;
						this.rechargeDialogDetailShow = false;
						this.rechargeDialogPaymentMethodShow = false;
						uni.showToast({
							title: "会员充值失败！",
							icon: 'none'
						})
						this.recharge_amount = '';
						uni.setStorageSync("refresh", true)
					}
				})
			},
			swtichIndex(index) {
				this.selectIndex = index
			},
			itemOpenEye(item) {
				item.openEye = !(item.openEye ?? false)
				this.$forceUpdate()
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/select/srvretail_recharge_give_amount_select", {
					"serviceName": "srvretail_recharge_give_amount_select",

					colNames: ["*"],
					"condition": [{
							"colName": "store_no",
							"ruleType": "eq",
							"value":  this.info.store_no
						},
						{
							"colName": "member_level_no",
							"ruleType": "eq",
							"value": this.info.member_level_no
						}
					]
				}).then(res => {
					uni.hideLoading()
					res.data.sort(function(a, b){return a.recharge_amount - b.recharge_amount}); 
					this.list = res.data;
				})
			},
		}
	}
</script> 

<style scoped lang="scss">
	.item-view {
		padding-top: 44rpx;
		padding-left: 50rpx;
		padding-bottom: 28rpx;
		width: 100%;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);

		.head-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 700;
			margin-right: 8rpx;
		}

		.state {
			padding: 0 8rpx;
			line-height: 30rpx;
			height: 30rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			font-size: 20rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.unstate {
			width: 74rpx;
			line-height: 30rpx;
			height: 30rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			font-size: 20rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}


		.phone {
			font-size: 30rpx;
			font-weight: 500;
		}

		.eye {
			width: 32rpx;
			height: 32rpx;
			margin-left: 18rpx;
		}

		.amount {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}

		.integral {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.arror-right {
			width: 12rpx;
			height: 24rpx;
		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}

	}


	.body-contaier {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: white;

		.title {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			margin-left: 24rpx;
		}

		.item-box {
			width: 340rpx;
			padding-top: 30rpx;
			padding-bottom: 18rpx;
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			border: 2px solid rgba(225, 225, 225, 1);
			margin-left: 24rpx;
			margin-bottom: 18rpx;
			position: relative;

			.name {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
			}

			.gift-box {
				margin-top: 14rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(56, 192, 158, 1);
				padding: 2rpx 10rpx;
				border-radius: 4rpx;
				background: rgba(56, 192, 158, 0.1);
			}

			.add {
				width: 48rpx;
				height: 48rpx;
				margin-top: 12rpx;
				font-size: 50rpx;
				line-height: 42rpx;
				text-align: center;
				color: rgba(56, 192, 158, 1);
				border-radius: 24rpx;
				background: rgba(56, 192, 158, 0.1);
			}

			.check-img {
				width: 40rpx;
				height: 40rpx;
				top: -8rpx;
				right: -6rpx;
				position: absolute;
			}
		}

		.item-box-check {
			border: 2px solid rgba(56, 192, 158, 1);
		}
	}



	.bottom-btn {
		justify-content: center;
		width: 100%;
		height: 146rpx;
		background: rgba(255, 255, 255, 1);

		.btn {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			border: 2px solid rgba(56, 192, 158, 1);
			line-height: 80rpx;
			text-align: center;
			color: white;
		}
	}

	.showDialog {
		animation: showDialog 0.3s ease-out;
		padding-top: 54rpx;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);

		.title-box {
			font-size: 18px;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			position: relative;
			padding-bottom: 24rpx;
			border-bottom: 2px solid rgba(225, 225, 225, 1);

			.text {
				width: 100%;
				text-align: center;
			}

			image {
				width: 72rpx;
				height: 52rpx;
				position: absolute;
				right: 24rpx;
				top: 0;
			}
		}

		.paytitle {
			flex: 1;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.payimg {
			width: 40rpx;
			height: 40rpx;
		}

		input {
			margin: 100rpx 50rpx;
			margin-right: 48rpx;
			flex: 1;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 24rpx;
			opacity: 1;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 500;
			background: rgba(245, 245, 247, 1);
		}


		.name {
			flex: 1;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.value {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.confirm {
			margin-bottom: 56rpx;
			justify-content: center;
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
			color: white;
			border-radius: 40px;
			background-color: rgba(56, 192, 158, 1);
			;
		}

	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}
	
</style>
